<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="../../plugins/element-ui/index.css" />
		<link rel="stylesheet" href="../../styles/common.css" />
		<link rel="stylesheet" href="../../styles/page.css" />
	</head>
	<body>
		<div class="dashboard-container" id="card-app">
			<div class="container">
				<div class="tableBar">
					<!-- 会员卡名称输入框 -->
					<el-input v-model="queryParams.name" placeholder="请输入会员卡名称" style="width: 250px" clearable
						@keyup.enter.native="handleQuery">
						<i slot="prefix" class="el-input__icon el-icon-search" style="cursor: pointer" @click="handleQuery"></i>
					</el-input>

					<!-- 标签选择框 -->
					<el-select v-model="queryParams.tag" placeholder="请选择标签" clearable style="margin-left: 10px; width: 150px"
						:loading="tagLoading">
						<el-option v-for="tag in tagList" :key="tag" :label="tag" :value="tag">
							{{tag}}
						</el-option>
					</el-select>

					<!-- 搜索按钮 -->
					<el-button type="primary" icon="el-icon-search" @click="handleQuery" style="margin-left: 10px">
						搜索
					</el-button>


					<div class="tableLab">
						<el-button type="primary" @click="addCardTemp('add')">+ 新建会员卡</el-button>
					</div>
				</div>
				<el-table :data="tableData" stripe class="tableBox" @selection-change="handleSelectionChange">
					<!--            <el-table-column type="selection" width="25"></el-table-column>-->
					<el-table-column prop="name" label="会员卡名称" align="center"></el-table-column>
					<el-table-column prop="background" label="图片" align="center">
						<template slot-scope="{ row }">
							<el-image style="width: auto; height: 40px; border:none;cursor: pointer;" :src="getImage(row.background)"
								:preview-src-list="[ getImage(row.background)]">
								<div slot="error" class="image-slot">
									<img src="../../images/noImg.png" style="width: auto; height: 40px; border:none;">
								</div>
							</el-image>
						</template>
					</el-table-column>
					<el-table-column prop="type" label="会员卡类型" align="center"></el-table-column>
					<el-table-column label="原价">
						<template slot-scope="scope">
							<span style="margin-right: 10px;">￥{{ scope.row.oldPrice }}</span>
						</template>
					</el-table-column>
					<el-table-column label="售价">
						<template slot-scope="scope">
							<span style="margin-right: 10px;">￥{{ scope.row.price }}</span>
						</template>
					</el-table-column>
					<!--            <el-table-column prop="num" label="使用次数">-->
					<!--            </el-table-column>-->
					<!--            <el-table-column prop="day" label="有效天数"></el-table-column>-->
					<el-table-column prop="tags" label="标签" align="center"></el-table-column>
					<el-table-column prop="updateTime" label="修改时间" align="center">
					</el-table-column>
					<el-table-column label="操作" width="160" align="center">
						<template slot-scope="scope">
							<el-button type="text" size="small" class="blueBug" @click="addCardTemp(scope.row.cardTempId)">修改
							</el-button>
							<el-button type="text" size="small" class="delBut non" @click="deleteHandle(scope.row.cardTempId)">
								删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination class="pageList" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="counts" @size-change="handleSizeChange"
					:current-page.sync="page" @current-change="handleCurrentChange"></el-pagination>
			</div>
		</div>
	</body>
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="../../plugins/vue/vue.js"></script>
	<!-- 引入组件库 -->
	<script src="../../plugins/element-ui/index.js"></script>
	<!-- 引入axios -->
	<script src="../../plugins/axios/axios.min.js"></script>
	<script src="../../js/request.js"></script>
	<script src="../../api/card.js"></script>
	<!--<script src="../../api/tags.js"></script>-->
	<script src="../../api/shopkeeper.js"></script>

	<script>
		// let tagsOptions = ['搏击', '瑜伽', '跳舞'];
		new Vue({
			el: '#card-app',
			data() {
				return {
					input: '',
					counts: 0,
					page: 1,
					pageSize: 10,
					tableData: [{
						name: '会员卡',
					}],
					cardState: '',
					checkList: [],
					form: {
						addCardName: '',
						tags: [],
					},
					tagList: [],
					queryParams: {
						name: null,
						tag: null
					},
					tagLoading: false
				}
			},
			computed: {},
			created() {
				this.init()
				//根据标签类型获取标签名字
				/*
				 * 经过测试发现：
				 * 该页面调用tags.js文件中的getTagListByType此api会报错，其他页面正常执行，可以拿到结果
				 * 测试引入其他的api进行测试，也没有问题，唯独tags.js会报错
				 * 报错：ReferenceError: getTagListByType is not defined
				 * 解决方案，做如下更改：
				 * ①将引入的tags.js注掉
				 * ②将getTagListByType放入到card.js中
				 * ③正常调用执行
				 * */
				getTagListByType("会员卡").then(
					res => {
						this.tagList = res.data;
					}
				)
			},

			mounted() {},
			methods: {
				async init() {
					// var _this = this;
					// getAllTagsName().then(res => {
					//     _this.tagList = res.data || []
					//     console.log(_this.tagList)
					// });
					// 构造查询参数
					const params = {
						page: this.page, // 当前页码
						pageSize: this.pageSize, // 每页条数
						name: this.queryParams.name, // 会员卡名称
						tag: this.queryParams.tag, // 标签
					};
					// 调用分页查询接口
					await getCardTempPage(params).then(res => {
						// 处理响应数据
						if (String(res.code) === '1') {
							this.tableData = res.data.records || []; // 表格数据
							console.log(this.tableData);
							this.counts = res.data.total; // 总条数
						}
					})
				},
				// async fetchTags() {
				// 	try {
				// 		const res = await getAllTags();
				// 		if (res && res.rows) {
				// 			this.tagList = res.rows;
				// 		}
				// 	} catch (error) {
				// 		console.error('获取标签失败', error)
				// 	}
				// },
				getImage(background) {
					return $minioUrl+background
				},
				handleQuery() {
					this.page = 1;
					this.init();
				},
				//状态修改
				// statusHandle (row) {
				//     this.id = row.id;
				//     this.status = row.status;
				//     this.$confirm('确认调整该账号的状态?', '提示', {
				//         'confirmButtonText': '确定',
				//         'cancelButtonText': '取消',
				//         'type': 'warning'
				//     }).then(() => {//点击确定执行
				//         // 调用请求方法   0--false----true   1---true---0
				//         //this.status=="0"||this.status==0 ? "1" : "0"
				//         enableOrDisableCard({ 'id': this.id, 'status':!this.status?1:0 }).then(res => {//请求结果处理
				//             if (String(res.code) === '1') {
				//                 this.$message.success('账号状态更改成功！');
				//                 this.handleQuery()
				//             }else{
				//                 this.$message.error(res.msg)
				//             }
				//         }).catch(err => {
				//             this.$message.error('请求出错了：' + err)
				//         })
				//     })
				// },
				// 添加
				addCardTemp(st) {
					if (st === 'add') {
						window.parent.menuHandle({
							id: '6',
							url: 'page/card/add.html',
							name: '添加会员卡'
						}, true)
					} else {
						window.parent.menuHandle({
							id: '6',
							url: 'page/card/update.html?id=' + st,
							name: '修改会员卡'
						}, true)
					}
				},
				// 全部操作
				handleSelectionChange(val) {
					let checkArr = [];
					val.forEach((n) => {
						checkArr.push(n.id)
					});
					this.checkList = checkArr
				},
				handleSizeChange(val) {
					this.pageSize = val;
					this.init()
				},
				handleCurrentChange(val) {
					this.page = val;
					this.init()
				},
				deleteHandle(id) {
					console.log(id)
					this.$confirm('确认删除该会员卡, 是否继续?', '确定删除', {
						'confirmButtonText': '确定',
						'cancelButtonText': '取消',
					}).then(() => {
						deleteTempCard(id).then(res => {
							console.log(res)
							if (res.code === 1) {
								this.$message.success('删除成功！');
								this.handleQuery()
							} else {
								this.$message.error(res.msg || '操作失败')
							}
						}).catch(err => {
							this.$message.error('请求出错了：' + err)
						})
					})
				}
			}
		})
	</script>
</html>